<template>
  <div>
    <div class="info">
      <div>
        <div><img :src="imgSrc1" alt="字数" width="10%"></div>
        <div>{{info.wordage > 0 ? info.wordage : 20030}}</div>
    </div>
    <div>
      <div><img :src="imgSrc2" alt="点赞" width="10%"></div>
      <div>{{info.likes > 0 ? info.likes : 5}}</div>
    </div>
    <div>
      <div><img :src="imgSrc3" alt="粉丝" width="10%"></div>
      <div>{{info.followers > 0 ? info.followers : 6}}</div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  created() {
    this.$axios.get('https://www.jianshu.com/asimov/users/slug/23749041c9c0/')
    .then((res) => {
      // 总字数
      this.info.wordage = res.data.total_wordage
      // 点赞数
      this.info.likes = res.data.total_likes_count
      // 粉丝数
      this.info.followers = res.data.followers_count
    })
  },
  data() {
    return {
      imgSrc1: require('../img/views.png'),
      imgSrc2: require('../img/likes.png'),
      imgSrc3: require('../img/followers.png'),
      info: {
        wordage: '',
        likes: '',
        followers: ''
      }
    };
  },
  computed:{
  },
  watch:{
  },
  methods: {},
};
</script>

<style scoped>
.info {
  display: flex;
  color: #aaa;
}

.info div {
  margin-right: 10px;
  margin: 0 -34px;
}
</style>
